<template>
	<view class="custom-header" :style="{'padding-top':safeTop + 'px'}">
		<!-- <view class="status_bar">
			
			<view class="top_view"></view>
		</view> -->
		<view class="titles">
			<view @click="goback">返回</view>
			<view class="title_txt">new页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeTop: 0
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			}
		},
		mounted() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			console.log(safeAreaInsets?.top, 'safeAreaInsets?.top')
			this.safeTop = safeAreaInsets?.top
		}
	}
</script>

<style lang="scss" scoped>
	.custom-header {
		// height: calc(var(--status-bar-height) + 88rpx);
		width: 100%;
		background-color: #2e8b57;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			background-color: #2e8b57;
		}

		.top_view {
			height: var(--status-bar-height);
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;
			background-color: #2e8b57;
		}

		.titles {
			background-color: #2e8b57;
			width: 100%;
			display: flex;
			justify-content: space-between;
			// position: fixed;
			// top: var(--status-bar-height);
			font-size: 32rpx;
			color: #fff;
			line-height: 88rpx;
			height: 88rpx;
			text-align: center;
		}

		.title_txt {
			position: absolute;
			left: 50%;
			transform: translate(-50%);
		}
	}
</style>